<%--
  Created by IntelliJ IDEA.
  User: 86176
  Date: 2020/4/24
  Time: 13:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>原生的ajax处理</title>
    <script type="text/javascript">
        // ajax请求处理函数
        function doAjax() {
            console.log("正准备执行ajax请求");
            //     （1）创建ajax引擎对象 XMLHttprequest对象（浏览器支持）
            var xmlhttp; // 声明一个ajax引擎对象变量
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // （2）委托ajax引擎发送服务器请求（get/post）
            /*
             第一个参数表示使用 get/post请求
             第二个参数表示请求的服务器的url（也即是form表单的action属性）
             第三个参数表示是否采用异步处理；默认是true，异步处理
             */
            // 获取form表单中的输入框控件的值
            var userName = document.getElementById("userName").value; // document.getElementById("") 方法获取指定id的控件对象
            xmlhttp.open("GET", "AjaxDemoServlet?userName=" + userName, true); // get请求
            // ajax引擎发送请求到服务器
            xmlhttp.send(); // get请求
            // （3）根据web服务器响应结果状态，进行回调处理[给onreadystatechange事件绑定监听函数]
            xmlhttp.onreadystatechange = doCallBack;

            // （4）在回调函数中，进行浏览器局部刷新操作
            function doCallBack() {
                // 服务器状态为200且ajax引擎状态为4时进行回调处理
                // 在回调函数里面从 ajax引擎对象的 responseText 属性中获取服务器的响应内容
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    // 局部刷新浏览器：使用js操作页面标签对象进行显示【dom操作】
                    document.getElementById("showMsg").innerHTML = xmlhttp.responseText;
                }
            }
        }

        /////////////////////////////////////////////////////////////////////////
        // ajax请求处理函数
        function doAjax_post() {
            console.log("正准备执行ajax请求");
            //     （1）创建ajax引擎对象 XMLHttprequest对象（浏览器支持）
            var xmlhttp; // 声明一个ajax引擎对象变量
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // （2）委托ajax引擎发送服务器请求（get/post）
            /*
             第一个参数表示使用 get/post请求
             第二个参数表示请求的服务器的url（也即是form表单的action属性）
             第三个参数表示是否采用异步处理；默认是true，异步处理
             */
            // 获取form表单中的输入框控件的值
            var userName = document.getElementById("userName").value; // document.getElementById("") 方法获取指定id的控件对象
            //xmlhttp.open("GET", "AjaxDemoServlet?userName=" + userName, true); // get请求
            xmlhttp.open("POST", "AjaxDemoServlet", true);
            // ajax引擎发送请求到服务器
            //xmlhttp.send(); // get请求
            // 在post请求中需要设置request的header格式，否则服务器无法正确的 从 request中获取客户端发送的数据
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            // 发送post请求
            xmlhttp.send("userName="+ userName);
            // （3）根据web服务器响应结果状态，进行回调处理[给onreadystatechange事件绑定监听函数]
            xmlhttp.onreadystatechange = doCallBack;

            // （4）在回调函数中，进行浏览器局部刷新操作
            function doCallBack() {
                // 服务器状态为200且ajax引擎状态为4时进行回调处理
                // 在回调函数里面从 ajax引擎对象的 responseText 属性中获取服务器的响应内容
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    // 局部刷新浏览器：使用js操作页面标签对象进行显示
                    document.getElementById("showMsg").innerHTML = xmlhttp.responseText;
                }
            }
        }
    </script>
</head>
<body>
<form>
    用户名：<input type="text" id="userName" name="userName">
    会掉结果：<label id="showMsg"></label>
    <input type="button" value="ajaxDemo" onclick="doAjax()">
    <input type="button" value="ajaxDemo_Post" onclick="doAjax_post()">
</form>
</body>
</html>